<template>
  <div class="app-container">
    <div class="customContainer ">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-select filterable placeholder="选择门店" v-model="formInline.store_id" style="width:300px">
            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker style="width:130px" v-model="pickerDate" value-format="yyyy-MM-dd" type="month" format="yyyy-MM" :picker-options="pickerOptions"
            placeholder="选择月"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="mini">
        <el-table-column align="center" label='序号' width="50">
          <template slot-scope="scope">
            <span class="indexColor">{{scope.$index+1}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="门店" prop="store_name" width="150" sortable></el-table-column>
        <el-table-column align="center" label="门店营收">
          <el-table-column align="center" label="目标" prop="income_money" sortable></el-table-column>
          <el-table-column align="center" label="完成" prop="money"></el-table-column>
          <el-table-column align="center" label="完成率" prop="income_ratio"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="摊位机">
          <el-table-column align="center" label="目标" prop="booth_machine_money" sortable></el-table-column>
          <el-table-column align="center" label="完成" prop="money1"></el-table-column>
          <el-table-column align="center" label="完成率" prop="booth_ratio"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="礼品机">
          <el-table-column align="center" label="目标" prop="gift_machine_money" sortable></el-table-column>
          <el-table-column align="center" label="完成" prop="money2"></el-table-column>
          <el-table-column align="center" label="完成率" prop="gift_ratio"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="彩票机">
          <el-table-column align="center" label="目标" prop="lottery_machine_money" sortable></el-table-column>
          <el-table-column align="center" label="完成" prop="money3"></el-table-column>
          <el-table-column align="center" label="完成率" prop="lottery_ratio"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="门禁类">
          <el-table-column align="center" label="目标" prop="pass_business_money" sortable></el-table-column>
          <el-table-column align="center" label="完成" prop="money4"></el-table-column>
          <el-table-column align="center" label="完成率" prop="pass_ratio"></el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getList, getStoreList } from '@/api/storage_control/credentialCheck';
import { pickerOptionsMonth } from '@/utils';
export default {
  data() {
    return {
      list: [],
      total: null,
      listLoading: false,
      storeList: null,
      look_del: '0',
      formInline: {
        store_id: '',
        time: ''
      },
      pickerDate: new Date(Date.UTC(new Date().getFullYear(), new Date().getMonth() - 1)).toISOString().slice(0, 10),
      pickerOptions: pickerOptionsMonth(-1)
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (!vm.storeList) {
        vm.getStore();
      }
    });
  },
  methods: {
    // 获取门店
    getStore() {
      getStoreList({ look_del: this.look_del, category_id: 427 }).then(response => {
        this.storeList = response;
        let data = response.filter(res => res.id == this.$store.getters.optionId);
        if (data.length > 0) {
          this.formInline.store_id = data[0].id;
        } else {
          if (this.storeList.length > 0) {
            this.formInline.store_id = this.storeList[0].id;
          }
        }
        this.searchClick();
      });
    },
    // 搜索
    searchClick() {
      // this.formInline.time = this.pickerDate.substring(0, this.pickerDate.length - 3);
      this.formInline.time = this.pickerDate;
      this.fetchData();
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.list = [];
      getList(this.formInline)
        .then(res => {
          if (res.code == 1) {
            res.message.forEach(val => {
              val.income_ratio = val.income_money == 0 ? '0.00%' : ((val.money / val.income_money) * 100).toFixed(2) + '%';
              val.booth_ratio = val.booth_machine_money == 0 ? '0.00%' : ((val.money1 / val.booth_machine_money) * 100).toFixed(2) + '%';
              val.gift_ratio = val.gift_machine_money == 0 ? '0.00%' : ((val.money2 / val.gift_machine_money) * 100).toFixed(2) + '%';
              val.lottery_ratio = val.lottery_machine_money == 0 ? '0.00%' : ((val.money3 / val.lottery_machine_money) * 100).toFixed(2) + '%';
              val.pass_ratio = val.pass_business_money == 0 ? '0.00%' : ((val.money4 / val.pass_business_money) * 100).toFixed(2) + '%';
              val.money = (val.money * 1).toFixed(2);
              val.money1 = (val.money1 * 1).toFixed(2);
              val.money2 = (val.money2 * 1).toFixed(2);
              val.money3 = (val.money3 * 1).toFixed(2);
              val.money4 = (val.money4 * 1).toFixed(2);
            });
            this.list = res.message;
          }
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
        });
    }
  }
};
</script>